<template>
  <div>
    <a-card :bordered="false">
      <!-- 按钮操作区域 -->
      <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
        <a-alert type="info" :showIcon="true">
          <div slot="message">
            当前选择：<span v-if="this.currSelected.catalogName">{{ getCurrSelectedTitle() }}</span>
            <a v-if="this.currSelected.catalogName" style="margin-left: 10px" @click="onClearSelected">取消选择</a>
          </div>
        </a-alert>
        <a-input-search @search="onSearch" style="width:100%;margin-top: 10px" placeholder="请输入分类名称"/>
        <!-- 树-->
        <a-col :md="10" :sm="24">
          <template>
            <a-dropdown>
              <span style="user-select: none">
                <a-tree
                  :replaceFields="replaceFields"
                  checkable
                  multiple
                  @select="onSelect"
                  :selectedKeys="selectedKeys"
                   :checkedKeys="checkedKeys"
                  :treeData="treeData"
                  :checkStrictly="checkStrictly"
                  :expandedKeys="iExpandedKeys"
                  :autoExpandParent="autoExpandParent"
                  @expand="onExpand"/>
              </span>
            </a-dropdown>
          </template>
        </a-col>
      </div>
    </a-card>
    <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
    <div class="drawer-bootom-button">
      <a-dropdown :trigger="['click']" placement="topCenter">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
          <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
          <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
          <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
          <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
          <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
        </a-menu>
        <a-button>
          树操作 <a-icon type="up" />
        </a-button>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { getAction, httpAction, deleteAction } from '@/api/manage'
export default {
  name: 'TopicTypeTree',
  data() {
    return {
      replaceFields: {
        children: 'childList', title: 'catalogName', key: 'id'
      },
      autoExpandParent: true,
      iExpandedKeys: [],
      checkStrictly: true,
      selectedKeys: [],
      checkedKeys: [],
      currSelected: {},
      treeData: []
    }
  },
  created() {
    this.onSearch()
  },
  methods: {
    changeSelected() {
      this.$emit('changeTopicType', this.currSelected)
    },
    onSearch(value) {
      const that = this
      if (value) {
        that.loadTree(value)
      } else {
        that.loadTree()
      }
    },
    loadTree(val) {
      var that = this
      that.treeData = []
      var queryParam = {}
      if (val) {
        queryParam.catalogName = val
      }
      getAction('/index/config/queryIndexCatalog', queryParam).then((res) => {
        if (res.success) {
          // 部门全选后，再添加部门，选中数量增多
          this.allTreeKeys = []
          for (let i = 0; i < res.result.length; i++) {
            const temp = res.result[i]
            that.treeData.push(temp)
            that.setThisExpandedKeys(temp)
            that.getAllKeys(temp)
            // console.log(temp.id)
          }
          this.loading = false
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    setThisExpandedKeys(node) {
      if (node.children && node.children.length > 0) {
        this.iExpandedKeys.push(node.key)
        for (let a = 0; a < node.children.length; a++) {
          this.setThisExpandedKeys(node.children[a])
        }
      }
    },
    getAllKeys(node) {
      // console.log('node',node);
      this.allTreeKeys.push(node.id)
      if (node.childList && node.childList.length > 0) {
        for (let a = 0; a < node.childList.length; a++) {
          this.getAllKeys(node.childList[a])
        }
      }
    },
    getCurrSelectedTitle() {
      return !this.currSelected.catalogName ? '' : this.currSelected.catalogName
    },
    onSelect(selectedKeys, e) {
      const record = e.node.dataRef
      this.currSelected = Object.assign({}, record)
      this.selectedKeys = [record.id]
      this.changeSelected()
    },
    onClearSelected() {
      this.currSelected = {}
      this.selectedKeys = []
      this.changeSelected()
    },
    onExpand(expandedKeys) {
      this.iExpandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    switchCheckStrictly(v) {
      if (v == 1) {
        this.checkStrictly = false
      } else if (v == 2) {
        this.checkStrictly = true
      }
    },
    checkALL() {
      this.checkStriccheckStrictlytly = false
      this.checkedKeys = this.allTreeKeys
    },
    cancelCheckALL() {
      // this.checkedKeys = this.defaultCheckedKeys
      this.checkedKeys = []
    },
    expandAll() {
      this.iExpandedKeys = this.allTreeKeys
    },
    closeAll() {
      this.iExpandedKeys = []
    }
  }
}
</script>

<style scoped>
  .drawer-bootom-button {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>
